<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>资源管理</title>
<link href="../css/popForm.css" rel="stylesheet" type="text/css" />
<link href="../css/tab.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="../scripts/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
//访问url
var url = '<%=basePath%>rest/apm/relations';
	//查询资源列表方法
	function getRelations() {
		$('#showtable').html('');
		$.getJSON(url, function(data) {
			relations = data.relations;
			CreateTable(relations);
		});
	}

	//表格提交方法
	function Relationtab() {
		var i = document.getElementById('funNum').value;
		if (i == 1) {
			addRelation();
		} else if (i == 2) {
			updRelation();
		}
	}

	//弹出添加表单
	function addForm(){
		document.getElementById('funNum').value=1;
		 showPopup('240px','120px');
	}
	
	//添加资源方法
	function addRelation() {
		var jsonObj = jsonData();
		$.ajax({
			url : url,
			type : 'POST',
			contentType : 'application/json; charset=UTF-8',
			data : jsonObj,
			success : function(data) {
				showOperResult(data);
			}
		});
		$('#showtable').html('');
		getRelations();
	}

	//更新资源方法
	function updRelation() {
		var jsonObj = jsonData();
		$.ajax({
			url : url,
			type : 'PUT',
			contentType : 'application/json; charset=UTF-8',
			data : jsonObj,
			success : function(data) {
				showOperResult(data);
			}
		});
		$('#showtable').html('');
		getRelations();
	}

	//删除资源方法
	function delRelation(id) {
		var delurl = '<%=basePath%>rest/apm?id='+id+'&typeid=4';
		$.ajax({
			url : delurl,
			type : 'DELETE',
			success : function(result) {
				showOperResult(data);
			}
		});
		$('#showtable').html('');
		getRelations();
	}

	//封装json数据，为了代码清晰 
	function jsonData() {
		var relationId = document.getElementById('relationId').value;
		var from = document.getElementById('from').value;
		var to = document.getElementById('to').value;
		
		var jsonStr = "{";
		jsonStr += "\"relationId\":";
		jsonStr += "\"" + relationId + "\"";
		jsonStr += ",";
		jsonStr += "\"from\":";
		jsonStr += "\"" + from + "\"";
		jsonStr += ",";
		jsonStr += "\"to\":";
		jsonStr += "\"" + to + "\"";
		jsonStr += "}";
		return jsonStr;//关键在于转换。 
	}

	$(document).ready(function() {
		getRelations();
		getNodes();
	});

	//创建表格
	function CreateTable(datalist) {
		var table = $("<table class=\"tab\">");
		table.appendTo($("#showtable"));
		var th = $("<th></th>");
		var td1 = $("<td>id</td>");
		var td2 = $("<td>relationId</td>");
		var td3 = $("<td>from</td>");
		var td4 = $("<td>to</td>");
		var td5 = $("<td>操作</td>");
		td1.appendTo(th);
		td2.appendTo(th);
		td3.appendTo(th);
		td4.appendTo(th);
		td5.appendTo(th);
		th.appendTo(table);
		for (var k = 0; k < datalist.length; k++) {
			var objStr=JSON.stringify(datalist[k]);
			var tr1 = $("<tr></tr>");
			var td1 = $("<td>" + datalist[k].id + "</td>");
			var td2 = $("<td>" + datalist[k].relationId + "</td>");
			var td3 = $("<td>" + datalist[k].from + "</td>");
			var td4 = $("<td>" + datalist[k].to + "</td>");
			var td5 = $("<td><a href='#' onclick=delRelation('" + datalist[k].relationId
					+ "')>删除</a>&nbsp;||&nbsp;<a href='#' onclick=showUpdFormVal("+objStr+")>编辑</a></td>");
			td1.appendTo(tr1);
			td2.appendTo(tr1);
			td3.appendTo(tr1);
			td4.appendTo(tr1);
			td5.appendTo(tr1);
			tr1.appendTo(th);
		}
		$("#showtable").append("</table>");
	}
	
	function showOperResult(status){
		$('#operStaus').html('');
		if(status==1){
			$('#operStaus').html("<font size='3' color='red'>操作失败！</font>");
		}else if(status==2){
			$('#operStaus').html("<font size='3' color='red'>操作成功！</font>");
		}
	}
	
	//弹出更新表单
	function showUpdFormVal(obj){
		 document.getElementById('funNum').value=2;
		 
		 document.getElementById('relationId').value =obj.relationId;
		 document.getElementById('from').value =obj.from;
		 document.getElementById('to').value=obj.to;
		 
		 showPopup('240px','120px');
	}
	
	function getNodes(){
	var urlnode = '<%=basePath%>rest/apm/nodes';
		$('#shownodetable').html('');
		$.getJSON(urlnode, function(data) {
			Nodes=data.nodes;
			CreateNodeTable(Nodes);
		});
	}
	
	//创建表格
	function CreateNodeTable(datalist) {
		var table = $("<table class=\"tab\">");
		table.appendTo($("#shownodetable"));
		var th = $("<th></th>");
		var td1 = $("<td>serviceId</td>");
		//var td2 = $("<td>serviceCode</td>");
		var td3 = $("<td>serviceName</td>");
		var td4 = $("<td>ip</td>");
		var td5 = $("<td>port</td>");
		var td6 = $("<td>操作</td>");
		td1.appendTo(th);
		//td2.appendTo(th);
		td3.appendTo(th);
		td4.appendTo(th);
		td5.appendTo(th);
		td6.appendTo(th);
		th.appendTo(table);
		for (var k = 0; k < datalist.length; k++) {
			var objStr=JSON.stringify(datalist[k]);
			var tr1 = $("<tr></tr>");
			var td1 = $("<td>" + datalist[k].serviceId + "</td>");
			//var td2 = $("<td>" + datalist[k].serviceCode + "</td>");
			var td3 = $("<td>" + datalist[k].serviceName + "</td>");
			var td4 = $("<td width=50px>" + datalist[k].ip + "</td>");
			var td5 = $("<td>" + datalist[k].port + "</td>");
			var td6 = $("<td><a href='#' onclick=delNode('"
					+ datalist[k].serviceId + "')>删除</a>&nbsp;||&nbsp;<a href='#' onclick=showUpdFormVal("+objStr+")>编辑</a></td>");
			td1.appendTo(tr1);
			//td2.appendTo(tr1);
			td3.appendTo(tr1);
			td4.appendTo(tr1);
			td5.appendTo(tr1);
			td6.appendTo(tr1);
			tr1.appendTo(th);
		}
		$("#shownodetable").append("</table>");
	}
</script>

<body>
	<input type="button" onclick="getRelations();" value="查询关系" />
	<input type="button" onclick="addForm();" value="添加关系" />
	<br />
	<!--操作结果提示-->
	<div id="operStaus" style="width:150px;height:25px;"></div>
	<input type="hidden" id="funNum" name="funNum" />
	<div id="popDiv">
		<div id="popTitle">
			<!-- 标题div -->
			<span class="title_left">修改操作</span> <span class="title_right">
			<a href="#" onclick="hidePopup();">关闭</a> </span>
		</div>
		<!-- 表单div -->
		<div id="popForm">
		<form id="form1" name="form1">
			<table>
				<tr id="resId" style="display: none;">
					<td>relationId</td>
					<td><input type="text" id="relationId" name="relationId" /></td>
				</tr>
				<tr>
					<td>from</td>
					<td><input type="text" id="from" name="from" /></td>
				</tr>
				<tr>
					<td>to</td>
					<td><input type="text" id="to" name="to" /></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" value="提交" onclick="Relationtab();" />
						&nbsp;<input type="reset" value="重置" />&nbsp;<input type="button" value="关闭" onclick="hidePopup()" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	</div>
	<hr>
	<div id="showtable"></div>
	<br />
	<hr>
	<div id="shownodetable"></div>
</body>
<script type="text/javascript" src="../scripts/mouseMoveForm.js"></script>
</html>